<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=0.45, user-scalable=yes">
    <title>投喂记录添加</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h2 id="headText" style="margin-left: 0.5%;margin-top: 0.3%"></h2>
<hr>
<div id="app">
    <input type="button" class="btn btn-primary btn-sm"
           onclick="location.href = '/CampusCats/home'" value="回主页" style="margin-left: 0.5%">
    <input type="button" class="btn btn-primary btn-sm" onclick="window.history.back()" value="后退">
    <hr>
    <form id="infos" action="#" method="post" style="margin-left: 0.5%">
        <label for="catIds">猫咪</label>
        <select name="catId" id="catIds" v-model="formData.catId">
            <option v-for="cat in cats.data" v-bind:value="cat.catId">{{cat.catName}}</option>
        </select><br>

        <label for="locationIds" id="locationL">{{locationL}}</label>
        <select name="locationId" id="locationIds" v-model="formData.locationId">
            <option v-for="location in locations.data" v-bind:value="location.locationId">{{location.location}}</option>
        </select><br>

        <label for="time" id="timeL">{{timeL}}</label>
        <input type="text" name="recordTime" id="time" v-model="formData.recordTime"><br>

        <label for="food" id="foodL" v-if="type === 'feeding'">食物</label>
        <input type="text" name="remarks" id="food" v-if="type === 'feeding'" v-model="formData.remarks"><br>

        <div>
            <input type="button" class="btn btn-primary btn-sm" id="submit" @click="submit" value="提交">
        </div>
    </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
<script src="/CampusCats/js/userMsg.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            ready: 0,
            type: window.location.href.split('type=')[1],
            catIdParam: '-1',
            cats: {},
            locationL: '',
            locations: {},
            timeL: '',
            formData: {
                catId: 1,
                locationId: 1
            }
        },
        mounted: async function() {
            if (this.type.includes('&catId=')) {
                this.type = this.type.split('&')[0];
                this.formData.catId = Number(this.catIdParam = window.location.href.split('catId=')[1]);
            }
            if (this.type === 'feeding') {
                this.locationL = '投喂位置';
                this.timeL = '投喂时间';
                document.title = '投喂记录添加';
            } else {
                this.locationL = '出现位置';
                this.timeL = '出现时间';
                document.title = '出现记录添加';
            }
            await userMsg('');
            this.cats = (await myAxios.get('/cats')).data;
            if (this.cats.code !== 20021) {
                alert("错误：" + this.cats.msg + "\n错误代码：" + this.cats.code);
            }
            this.ready++;
            this.locations = (await myAxios.get('/locations')).data;
            if (this.locations.code !== 20021) {
                alert("错误：" + this.locations.msg + "\n错误代码：" + this.locations.code);
            }
            this.ready++;
            document.getElementById('catIds').disabled = this.catIdParam !== '-1';
        },
        methods: {
            async submit() {
                if (this.ready === 2) {
                    let url = '/CampusCats/userRecords';
                    if (this.catIdParam !== '-1') {
                        url = '/CampusCats/catRecords?catId=' + this.formData.catId;
                    }
                    let add = (await myAxios.post("/" + this.type + "s", this.formData)).data;
                    if (add.code !== 20031) {
                        alert("错误：" + add.msg + "\n错误代码：" + add.code);
                    } else {
                        location.href = url;
                    }
                }
            }
        }
    });
</script>
</body>
</html>